var React=require('react/addons');
var TodoItem=require('./TodoItem.jsx');

module.exports=React.createClass({
    mixins:[React.addons.LinkedStateMixin],
    getInitialState(){
        return {
            todoItems: [
                {
                    task:'learn ooreact',
                },
                {
                    task:'learn webpack',
                },
                {
                    task:'conquer world',
                }
            ],
            owner:'john doe',
        };
    },
    render(){
        console.log(this.state);
        var todoItems= this.state.todoItems;
        var owner=this.state.owner;
        
        return <div>
            <div className='ChangeOwner'>
                <input type='text' valueLink={this.linkState('owner')} />
            </div>
            
            <div className='TodoItem'>
                <ul>{todoItems.map((todoItem,i)=>
                    <li key={'todoItem'+i}>
                        <TodoItem owner={owner} task={todoItem.task} />
                    </li>
                )}</ul>
            </div>
        </div>;
    },
    updateOwner(e){
        this.setState({
            owner: e.target.value,
        });
    },
});